<template>  
    <el-main>
        <el-form :model="userForm" size="mini" label-width="80px">
            <el-row>
                <el-col :span="5">
                    <el-form-item label="名称">
                        <el-input v-model="userForm.userName" placeholder="请输入用户名称"></el-input>
                    </el-form-item>
                </el-col>
                <el-button class="searchBtn" type="primary" size="mini" icon="el-icon-search">查询</el-button>
                <el-button @click="addUser" class="newBtn" type="primary" size="mini" icon="el-icon-search">新增</el-button>
            </el-row>
        </el-form>
        <el-table size="mini" :data="tableData" :height="tableHeight" border style="width: 100%">
            <el-table-column prop="date" label="日期"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
            <el-table-column label="操作" width="160" align="center">
                <template slot-scope="scope">
                    <el-button @click.native.prevent="editRow(scope.$index,tableData)" type="primary" size="mini">编辑</el-button>
                    <el-button @click.native.prevent="deleteRow(scope.$index,tableData)" type="danger" size="mini">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页组件-->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-size="10"
            layout="total, prev, pager, next"
            :total="this.tableData.length">
        </el-pagination>
        <!-- 新增对话框-->
        <el-dialog title="添加用户" :visible.sync="visible" width="30%" center >
            <el-form ref="addUser" :model="addUserForm" size="mini" :inline="true" >
                <el-form-item prop="userName" label="用户名" label-width="130px">
                    <el-input v-model="addUserForm.userName" placeholder="用户名" ></el-input>
                </el-form-item>
                <el-form-item prop="address" label="地址" label-width="130px">
                    <el-input v-model="addUserForm.address" placeholder="地址" ></el-input>
                </el-form-item>
                <el-form-item label="是否可用" label-width="130px">
                    <el-switch v-model="userForm.enabled" 
                              active-color="#13ce66"
                              inactive-color="#ff4949"
                              active-value="1"
                              inactive-value="0">
                            </el-switch>
                  </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="visible=false">取 消</el-button>
                <el-button type="primary" @click="visible= false">确 定</el-button>
            </span>
        </el-dialog>
    </el-main>
</template>
<script>
export default {
    data(){
        
        return{
            currentPage:1,
            pageSize:10,
           
            userForm:{
                userName:""
            },
            tableHeight: window.innerHeight,
            tableData:[
                {
                    date: "2020-08-18",
                    name: "kami",
                    address: "肇庆学院"
                },{
                    date: "2020-08-17",
                    name: "kami",
                    address: "肇庆学院"
                },{
                    date: "2020-08-16",
                    name: "kami",
                    address: "肇庆学院"
                },{
                    date: "2020-08-15",
                    name: "kami",
                    address: "肇庆学院"
                },{
                    date: "2020-08-14",
                    name: "kami",
                    address: "肇庆学院"
                },{
                    date: "2020-08-13",
                    name: "kami",
                    address: "肇庆学院"
                },{
                    date: "2020-08-12",
                    name: "kami",
                    address: "肇庆学院"
                },{
                    date: "2020-08-11",
                    name: "kami",
                    address: "肇庆学院"
                },{
                    date: "2020-08-10",
                    name: "kami",
                    address: "肇庆学院"
                },{
                    date: "2020-08-09",
                    name: "kami",
                    address: "肇庆学院"
                },{
                    date: "2020-08-09",
                    name: "kami",
                    address: "肇庆学院"
                },{
                    date: "2020-08-09",
                    name: "kami",
                    address: "肇庆学院"
                },{
                    date: "2020-08-08",
                    name: "kami",
                    address: "肇庆学院"
                },{
                    date: "2020-08-08",
                    name: "kami",
                    address: "肇庆学院"
                },{
                    date: "2020-08-08",
                    name: "kami",
                    address: "肇庆学院"
                },{
                    date: "2020-08-07",
                    name: "kami",
                    address: "肇庆学院"
                },{
                    date: "2020-08-07",
                    name: "kami",
                    address: "肇庆学院"
                },{
                    date: "2020-08-07",
                    name: "kami",
                    address: "肇庆学院"
                },{
                    date: "2020-08-06",
                    name: "kami",
                    address: "肇庆学院"
                },{
                    date: "2020-08-06",
                    name: "kami",
                    address: "肇庆学院"
                },{
                    date: "2020-08-05",
                    name: "kami",
                    address: "肇庆学院"
                },
                
            ],
            visible:false,
            addUserForm:{
                userName:' ',
                address:' ',
            },
            rules:{
                userName:[
                {
                    required:true,
                    trigger: "change",
                    message: "请输入用户名"
                }
                ],
                address: [
                {
                    required: true,
                    trigger: "change",
                    message: "请输入地址"
                }
                ]
            }
        };
    },methods:{
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val){
            console.log(`当前页: ${val}`);
        },
        //添加用户
        addUser(){
            //调用表单清空方法
            this.resetForm('addUser');
            this.visible=true;
        },
        //编辑用户
        editUser(row){
            console.log(row);
        },
        //删除用户
        deleteUser(row){
            console.log(row);
        },
        //清空表单数据
        resetForm(formName){
            if(this.$refs[formName]){
                this.$refs[formName].resetFields();
            }
        },
        comfirmBtn(){
            let _this=this;
            _this.$refs.addUser.validate(valid=>{
                if(valid){
                    _this.visible=false;
                }
            })
        },
    },
    
    
    //该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题
// 在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，
// 这个操作都应该放进Vue.nextTick()的回调函数中
    mounted() {
        this.$nextTick(() => {
            this.tableHeight = window.innerHeight - 200; //后面的50：根据需求空出的高度，自行调整
        });
    }
};
</script>
<style lang="scss" scoped>
.searchBtn{
    margin-left: 30px;
}
.el-main{
    padding-top: 5px !important;
}
</style>